import React, { useEffect, useState ,Key} from 'react'
import { Button, Form, Input, Table, Card,message,Tooltip } from 'antd';
import { SearchOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons"
import { useNavigate } from 'react-router-dom';

//引入api中请求的方法
import { getHosSetListRequest,deleteHosMsgRequest, batchDeleteHosRequest} from '@/api/hospital/hospitalSet';

//引入类型
import type { getHosSetListItemsType, getHosSetListRecordsType } from '@/api/hospital/model/hospitalSetTypes'
import type { searchHosFinishPraType } from './types'

import style from "./index.module.css"




export default function HospitalSet() {
  //使用编程式路由导航hook
  const navigate = useNavigate()

  //data是表格的数据 每一个对象的中的key和columns中的dataIndex一一对象展示数据
  const [tableData, setTableData] = useState<getHosSetListRecordsType>([])
  //定义current(当前页码)的state[useState的泛型根据我们传入的参数推论出来了]
  const [current, setCurrent] = useState(1)
  //定义total(总个数)的state
  const [total, setTotal] = useState(0)
  //定义pageSize(每页的数量)的state
  const [pageSize, setPageSize] = useState(3)
  //定义isLoading(table是否加载中)
  const [isLoading, setIsLoading] = useState(false);
  const [fieldValue, setFieldValue] = useState<searchHosFinishPraType>({})
  //定义一 个state,专门用来触发uesEffect的执行，重新加载
  const [reRender,setReRender]=useState(true)
  // 定义一个控制批量删除按钮的一个状态
  const [isSelect,setIsSelecte] =useState(true);
  //定义一个保存批量选中的ids的状态
  const [bacthSelectIds,setBatchSelectIds]=useState<Key[]>([]);



  
    // // console.log(result, "result");
    // //1.把得到的结果中records数据(医院列表的数组)设置给state
    // setTableData(result.records)
    // //2.把得到的结果中 数据的总长度设置给state
    // setTotal(result.total)

    // //请求完成后要把isLoading修改为false 
    // setIsLoading(false)
  
    // getHosSetList();
    
  //当组件加载的时候,开始请求分页列表的数据
  //注意:异步函数不能作为useEffect的参数,因为useEffect可能会书写return一个函数起到清理作用,如果是异步函数,则return就是异步的了
  useEffect(() => {
    //在请求开始之前,设置isLoading为true
    setIsLoading(true)
    //封装一个请求函数才可以,记得后续调用
  const getHosSetList = async () => {
    const result = await getHosSetListRequest({
      page: current,
      limit: pageSize,
      ...fieldValue
    });
     // console.log(result, "result");
      //1.把得到的结果中records数据(医院列表的数组)设置给state
      setTableData(result.records)
      //2.把得到的结果中 数据的总长度设置给state
      setTotal(result.total)

      //请求完成后要把isLoading修改为false 
      setIsLoading(false)
  }
    // 因为要对页面进行同步更新 所以把请求数据的函数进行封装，分别调用
    getHosSetList();
  }, [current, pageSize, fieldValue,reRender])

  // useState()

  // useEffect用法:
  /**
  *用来让我们的函数,在需要他的阶段(某个值发生变法/某个组件发生变化等等)执行
  第一个参数:do(做什么??)
  第二个参数:在什么(阶段)东西发生改变的时候做这件事
  */ 
  // useEffect(()=>{},[])
  // useContext
  
  // use****都是hooks
  // 首字母大写的都是组件


  //colums是控制表格的字段有哪些,title属性就是当前的字段名称,dataIndex就是用来和将来的数据进行一一对应的
  //render函数的第三个参数是当前的数据的下标
  //正常要求columns中要有key 但是如果书写了dataIndex 则可以省略key
  const columns = [
    {
      title: '序号',
      width: 60,
      dataIndex: 'index',
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
    },
    {
      title: '操作',
      width: 120,
      fixed: "right" as "right",
      dataIndex: "do",
      render(_: any,data:getHosSetListItemsType) {
        // // 通过解构赋值获取医院的id和医院名字
        // const {id,hosname} =data;
        // // 设置发送删除的请求
        // const deleteHosMsgHandle = () => {
        //   // 1.测试点击按钮是否生效
        //   // console.log(111);
        //   // 1.1确认点击事件生效之后开始写请求函数
        //   // 2.return一个函数 执行删除请求
        //   // await deleteHosMsgRequest(id)
        //    return async()=>{
        //     await deleteHosMsgRequest(id)
        //     // 3.确认删除请求成功.
        //     await alert(hosname+'删除成功！！！')
        //     // 重新渲染
        //     setReRender(!reRender)
            
        //    }
          

        // 老师的写法
        const {id}=data;
      
        
        return (
          <div>
            <Tooltip title="修改医院">
            <Button
            type='primary'
            icon={<EditOutlined/>}
            className={style.mr}
            onClick={() => { navigate(`/syt/hospital/updatehosset/${id}`) }}
            ></Button>
          </Tooltip>
          <Tooltip title="删除医院">
            <Button 
            type='primary' 
            danger 
            icon={<DeleteOutlined />}
            // 给删除按钮添加点击事件
            onClick = {deleteHosHandle(id)}
            ></Button>
          </Tooltip>
          </div >
        )
      }
    }
  ];


  //事件回调函数
  //1.点击页码以后的事件回调函数
  const pageChangeHandle = (current: number, pageSize: number) => {
    //参数1page:当前点击的页码  参数2 pageSize:每页条数
    //点击以后给state设置page和pageSize的值
    setCurrent(current)
    setPageSize(pageSize)
  }

  //2.点击查询提交表单的事件回调函数
  const searchHosFinishHandle = (fieldValue: searchHosFinishPraType) => {
    //参数是收集当前表单的值 组成的对象
    setFieldValue(fieldValue)
  }

  //3.添加医院事件回调函数
  const addHosHandle = () => {
    //编程式路由导航跳转
    navigate("/syt/hospital/addhosset")
  }


  // 4.删除单个医院的事件回调函数(老师的写法)
  const deleteHosHandle =(id:number)=>{
    return async ()=>{
      // 调用删除的接口
        await deleteHosMsgRequest(id)
  // 重新渲染
  setReRender(!reRender)
  message.success("删除医院成功")
}
  }


  // 5.批量删除按钮事件回调函数
  const batchDeleteHandle =async () =>{
    //发送批量删除请求
    await batchDeleteHosRequest(bacthSelectIds)

    message.success("批量删除成功");
    // 重新渲染
    setReRender(!reRender)
   
    
    // 把批量删除按钮恢复
    setIsSelecte(true)
  }
  return (
    <div className={style.outer}>
      <Card>
        <Form
          name="basic"
          wrapperCol={{ span: 30 }}
          layout='inline'
          onFinish={searchHosFinishHandle}
        >
          <Form.Item
            name="hosname"
          >
            <Input placeholder="医院名称" />
          </Form.Item>

          <Form.Item
            name="hoscode"
          >
            <Input placeholder='医院编号' />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="default" htmlType="reset">
              清空
            </Button>
          </Form.Item>
        </Form>
        <div className={style.mt}>
          <Button type='primary' onClick={addHosHandle} className={style.mr}>添加</Button>
          <Button type="primary" danger disabled={isSelect} onClick={batchDeleteHandle}>批量删除</Button>
        </div>

        <Table
          className={style.mt}
          columns={columns}
          dataSource={tableData}
          scroll={{ x: 1100 }}
          bordered  //这个是table里面的方法是，用法是是否展示外边框和列边框
          //在table中 要求dataSource中有key属性,但是如果真的没有key 则可以使用rowKey属性指定dataSource中的一个属性作为Key
          rowKey="id"
          loading={isLoading}
          rowSelection={{
            onChange(ids:Key[]){
            //设置控制批量删除按钮state的状态
             setIsSelecte(!ids.length)
           //当选项框被修改的时候,实时的修改保存所有被选中id的状态
           setBatchSelectIds(ids);
            }
          }}
          pagination={{
            //页码的配置：当前页码
            current,
            //总数据的数量
            total,
            //每页条数
            pageSize,
            //展示更改每页条数的选项(默认total大于50条的时候开启)
            pageSizeOptions: [3, 8, 15],
            //是否直接开启更新每页条数的选项
            showSizeChanger: true,

            showTotal(total) {
              return `总共有${total}条数据`
            },

            onChange: pageChangeHandle

          }}
        />
      </Card>
    </div>
  )
}
